<template>
  <div class="table-container">
    <div class="table-title">原工商业目录电价</div>
    <div class="formula-detail">
      <el-collapse class="formula-collapse" v-model="activeNames" accordion @change="handleChange">
        <el-collapse-item title="公式详情" name="1">
          <div class="formula">
            小计 = 还贷基金 + 可再生能源附加 + 重大水利建设基金 + 大中型水库移民后期扶持基金
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="bus_ele" label="工商业用电" width="150" />
      <el-table-column prop="level" label="电压等级" width="150" />
      <el-table-column prop="price" label="目录价" width="150">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.price"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="政府性基金及附加">
        <el-table-column prop="foundation" label="还贷基金" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.foundation"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="addition" label="可再生能源附加" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.addition"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="max_fund" label="重大水利建设基金">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.max_fund"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="after" label="大中型水库移民后期扶持基金">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.after"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="小计">
          <template #default="scope">
            <span>{{ getTotal(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="except" label="不含基金价" width="150">
        <template #default="scope">
          <span>{{ getExeTotal(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="150" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Origin',
  inheritAttrs: false,
});

const tableData = reactive([
  {
    bus_ele: '单一制',
    level: '不满1千伏',
    price: '0.5',
    foundation: '50',
    addition: '100',
    after: '50',
    total: '100',
    sum_price: '0.5',
    remark: '',
  },
  {
    bus_ele: '单一制',
    level: '1-10千伏',
    price: '0.5',
    foundation: '50',
    addition: '100',
    after: '50',
    total: '100',
    sum_price: '0.5',
    remark: '',
  },
  {
    bus_ele: '单一制',
    level: '35千伏',
    price: '0.5',
    foundation: '50',
    addition: '100',
    after: '50',
    total: '100',
    sum_price: '0.5',
    remark: '',
  },
  {
    bus_ele: '两部制',
    level: '1-10千伏',
    price: '0.5',
    foundation: '50',
    addition: '100',
    after: '50',
    total: '100',
    sum_price: '0.5',
    remark: '',
  },
  {
    bus_ele: '两部制',
    level: '35千伏',
    price: '0.5',
    foundation: '50',
    addition: '100',
    after: '50',
    total: '100',
    sum_price: '0.5',
    remark: '',
  },
  {
    bus_ele: '两部制',
    level: '110千伏',
    price: '0.5',
    foundation: '50',
    addition: '100',
    after: '50',
    total: '100',
    sum_price: '0.5',
    remark: '',
  },
]);

const activeNames = ref('1');
const handleChange = (val: any) => {};

const getTotal = (row: any) => {
  let total = 0;
  if (row.foundation) {
    total += row.foundation * 1;
  }
  if (row.addition) {
    total += row.addition * 1;
  }
  if (row.max_fund) {
    total += row.max_fund * 1;
  }
  if (row.after) {
    total += row.after * 1;
  }
  return total;
};

const getExeTotal = (row: any) => {
  if (row.price) {
    return row.price - row.total * 1 || 0;
  }
  return '-';
};

onMounted(() => {
  console.log('onmm');
});
</script>

<style lang="scss" scoped>
.formula-detail {
  display: flex;
  justify-content: flex-end;
}
.formula-collapse {
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding-left: 10px;

  :deep(.el-collapse-item__header) {
    color: #4080ff;
    background-color: transparent;
  }
}
.formula {
  padding: 5px;
}
</style>
